<template>
	<view>
		<view class="m-t-50" v-if="orderList.length === 0">
			<u-empty></u-empty>
		</view>
		<scroll-view scroll-y="true" :style="{'height':height + 'px' }" @scrolltolower="scrolltolower" v-else>
			<view class="w-600 b_bai br-20 list-box m-t-30 m-l-25 m-r-25 p-l-50 p-r-50"
				v-for="(item,index) in orderList" :key="index" @click="seeOrderDetail(item.id)">
				<view class="borderB">
					<view class="h-120 d_flex d_flex_between d_flex_items_center">
						<view class="d_flex d_flex_items_center">
							<text class="f-32 color333 f-wb">车辆：{{item.cartype}}</text>
							<text class="status m-l-15" v-if="item.status == 0">等待接单</text>
							<text class="status m-l-15" v-else-if="item.status == 1 && item.product_confirm == 1">已接单</text>
							<text class="status m-l-15" v-else-if="item.status == 2">已完成</text>
							<text class="status m-l-15" v-else-if="item.status == 3">已取消</text>
							<text class="status m-l-15" v-else-if="item.product_confirm == 0 && item.status == 1">待确认</text>
							<text class="status m-l-15" v-else>全部</text>
						</view>
						<view class="f-wb f-32 color-ff7a1f">
							￥{{item.money}}
						</view>
					</view>
					<view class="color67 f-24 p-b-40">
						<u-icon name="clock" color="#2979ff" size="28"></u-icon>
						<text class="m-l-10">施工地点：{{item.workplace}}</text>
					</view>
					<view class="color67 f-24 p-b-40">
						<u-icon name="clock" color="#2979ff" size="28"></u-icon>
						<text class="m-l-10">工作时间：{{item.worktimestart}} 至 {{item.worktimeend}}</text>
					</view>
					<view v-show="item.product_confirm == 0 && item.status == 1">
						<view class="color67 f-24 p-b-40">
							<u-icon name="clock" color="#2979ff" size="28"></u-icon>
							<text class="m-l-10">司机姓名：{{item.consumer.nickname}}</text>
						</view>
						<view class="color67 f-24 p-b-40">
							<u-icon name="clock" color="#2979ff" size="28"></u-icon>
							<text class="m-l-10">司机电话：{{item.consumer.mobile}}</text>
						</view>
					</view>
				</view>
				<view v-show="item.status != 3">
					<view class="d_flex d_flex_around d_flex_items_center h-90 f-28 f-wb" v-if="item.status == 0" @click.stop="delorder(item.id)">
						<view class="color999">取消订单</view>
					</view>
					<view class="d_flex d_flex_around d_flex_items_center h-90 f-28 f-wb" v-else-if="item.status == 1 && item.product_confirm == 1">
						<view class="color999 color-ff7a1f" @click.stop="okOrder(item.id)">完成订单</view>
					</view>
					<view class="d_flex d_flex_around d_flex_items_center h-90 f-28 f-wb" v-else-if="item.status == 2">
						<view class="color-2979ff" v-show="!item.product_evaluate_id" @click.stop="eva(item.id)">评价司机</view>
					</view>
					<view class="d_flex d_flex_around d_flex_items_center h-90 f-28 f-wb" v-else>
						<view class="color999 color-2979ff" @click.stop="sureOrder(item.id)">确认订单</view>
						<view class="color999">|</view>
						<view class="color-ff7a1f" @click.stop="uncheckorder(item.id)">换个司机</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:{
			orderList:Array,
			height:[String,Number]
		},
		methods:{
			scrolltolower(e){
				this.$emit('scrolltolower')
			},
			delorder(id){
				this.$emit('delorder',id)
			},
			okOrder(id){
				this.$emit('okOrder',id)
			},
			uncheckorder(id){
				this.$emit('uncheckorder',id)
			},
			sureOrder(id){
				this.$emit('sureOrder',id)
			},
			eva(id){
				this.$emit('eva',id)
			},
			seeOrderDetail(id){
				this.$emit('seeOrderDetail',id)
			}
		}
	}
</script>

<style lang="scss">
	.list-box{
		box-shadow: 0 0 10rpx #cecece;
		.status{
			background:#0055fe;
			color:#fff;
			font-size: 22rpx;
			width: 120rpx;
			border-radius: 10rpx;
			line-height:40rpx;
			text-align:center;
			display: inline-block;
		}
		.color-ff7a1f{
			color:#ff7a1f;
		}
		.color-2979ff{
			color:#2979ff;
		}
	}
</style>
